<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>文章评论</span>
        <!-- <el-button type="primary" size="mini" @click="addCateShowDialogBtnFn"
          >添加分类</el-button
        > -->
      </div>
      <el-table :data="commentList" style="width: 100%" border stripe>
        <el-table-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>
        <el-table-column prop="user_name" label="用户名"></el-table-column>
        <el-table-column prop="parent_id" label="父级评论">
          <template v-slot="{row}">
            <template v-for="item in commentList">
              <span v-if="item.id == row.parent_id" style="color:darkcyan;" :key="item.id">@{{ item.user_name}}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="评论内容"></el-table-column>
        <el-table-column label="发表时间" prop="pub_date">
          <template v-slot="{ row }">
            <span>{{ $formatDate(row.pub_date) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="评论状态">
          <template v-slot="{row}">
            <el-tag v-if="row.state === 0" type="info">待审核</el-tag>
            <el-tag v-if="row.state === 1" type="success">已通过</el-tag>
            <el-tag v-if="row.state === 2" type="danger">已屏蔽</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template v-slot="scope">
            <el-button
              @click="checkCommentFn(scope.row.id)"
              type="primary"
              size="mini"
              :disabled="scope.row.state !== 1? false: true"
              >审核</el-button
            >
            <el-button
              @click="deleteCommentFn(scope.row.id)"
              :disabled="scope.row.state !== 2? false: true"
              type="danger"
              size="mini"
              >屏蔽</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChangeFn"
        @current-change="handleCurrentChangeFn"
        :current-page.sync="q.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size.sync="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getArtCommentAPI, updateArtCommentAPI } from '../../api'
export default {
  name: 'BlogAdminArticlecomment',

  data () {
    return {
      // 查询参数对象
      q: {
        pagenum: 1,
        pagesize: 5
      },
      commentList: [],
      total: 0
    }
  },

  mounted () {
    this.getComment()
  },

  methods: {
    async getComment () {
      const { data: res } = await getArtCommentAPI(this.q)
      if (res.status !== 0) return this.$message.error(res.message)
      this.commentList = res.data
      this.total = res.total
    },
    async checkCommentFn (id) {
      const { data: res } = await updateArtCommentAPI({ id, state: 1 })
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getComment()
    },
    async deleteCommentFn (id) {
      const { data: res } = await updateArtCommentAPI({ id, state: 2 })
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getComment()
    },
    // pageSize 发生了变化
    handleSizeChangeFn (newSize) {
      // 为 pagesize 赋值
      this.q.pagesize = newSize
      // 默认展示第一页数据
      this.q.pagenum = 1
      // 重新发起请求
      this.getComment()
    },
    // 页码值发生了变化
    handleCurrentChangeFn (newPage) {
      // 为页码值赋值
      this.q.pagenum = newPage
      // 重新发起请求
      this.getComment()
    }
  }
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-pagination {
  margin-top: 15px;
}
</style>
